<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-left">
        <text class="page-title">仓库管理看板</text>
        <text class="warehouse-info">仓库编号: WH-2023-005 | 华东区域中心仓库</text>
      </view>
      <view class="header-right">
        <view class="datetime-card">
          <text class="current-date">{{ currentDate }}</text>
          <text class="current-time">{{ currentTime }}</text>
        </view>
      </view>
    </view>

    <!-- 数据概览卡片 -->
    <view class="stats-container">
      <view class="stat-card">
        <text class="stat-title">仓库总面积</text>
        <text class="stat-value">8,500 m²</text>
        <text class="stat-trend">较上月增长 2.4%</text>
      </view>
      <view class="stat-card">
        <text class="stat-title">仓库总容积</text>
        <text class="stat-value">25,600 m³</text>
        <text class="stat-trend">较上月增长 1.8%</text>
      </view>
      <view class="stat-card">
        <text class="stat-title">已用容积</text>
        <text class="stat-value">18,200 m³</text>
        <text class="stat-trend">使用率 71.1%</text>
      </view>
      <view class="stat-card">
        <text class="stat-title">员工出勤</text>
        <text class="stat-value">42/45 人</text>
        <text class="stat-trend">出勤率 93.3%</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 左侧区域：容积趋势和存储区 -->
      <view class="left-panel">
        <!-- 7天容积趋势图 -->
        <view class="panel-card">
          <view class="panel-header">
            <text class="panel-title">已用容积7天趋势</text>
            <view class="chart-period-selector">
              <button class="period-btn active">日</button>
              <button class="period-btn">周</button>
              <button class="period-btn">月</button>
            </view>
          </view>
          <view class="chart-container">
            <canvas id="volumeTrendChart" canvas-id="volumeTrendChart" class="chart"></canvas>
          </view>
		   <!-- 存储区情况 -->
        <view class="panel-card">
          <text class="panel-title">存储区情况</text>
          <view class="storage-areas">
            <!-- 普通存储区 -->
            <view class="storage-area normal">
              <view class="area-header">
                <text class="area-name">普通存储区</text>
                <text class="area-slots">520个库位</text>
              </view>
              <view class="area-info">
                <view class="info-item">
                  <text class="info-label">温度:</text>
                  <text class="info-value">23°C</text>
                </view>
                <view class="info-item">
                  <text class="info-label">湿度:</text>
                  <text class="info-value">45%</text>
                </view>
                <view class="info-item">
                  <text class="info-label">空载率:</text>
                  <text class="info-value">18%</text>
                </view>
                <view class="view-monitor">查看监控</view>
              </view>
            </view>

            <!-- 冷链存储区 -->
            <view class="storage-area cold">
              <view class="area-header">
                <text class="area-name">冷链存储区</text>
                <text class="area-slots">180个库位</text>
              </view>
              <view class="area-info">
                <view class="info-item">
                  <text class="info-label">温度:</text>
                  <text class="info-value">4°C</text>
                </view>
                <view class="info-item">
                  <text class="info-label">湿度:</text>
                  <text class="info-value">60%</text>
                </view>
                <view class="info-item">
                  <text class="info-label">空载率:</text>
                  <text class="info-value">25%</text>
                </view>
                <view class="view-monitor">查看监控</view>
              </view>
            </view> 

            <!-- 危险品存储区 -->
            <view class="storage-area danger">
              <view class="area-header">
                <text class="area-name">危险品存储区</text>
                <text class="area-slots">50个库位</text>
              </view>
              <view class="area-info">
                <view class="info-item">
                  <text class="info-label">温度:</text>
                  <text class="info-value">21°C</text>
                </view>
                <view class="info-item">
                  <text class="info-label">湿度:</text>
                  <text class="info-value">35%</text>
                </view>
                <view class="info-item">
                  <text class="info-label">空载率:</text>
                  <text class="info-value">32%</text>
                </view>
                <view class="view-monitor">查看监控</view>
              </view>
            </view>
          </view>
        </view>
		<!-- 物流状态和财务状况 -->
		<view class="">
		 <view class="bottom-section">
		  <!-- 物流状态表 -->
		  <view class="panel-card logistics-panel">
		    <text class="panel-title">今日物流状态</text>
		    <view class="table-container">
		      <table class="logistics-table">
		        <thead>
		          <tr>
		            <th>类别</th>
		            <th>单数</th>
		            <th>在途</th>
		            <th>完成</th>
		            <th>履约</th>
		          </tr>
		        </thead>
		        <tbody>
		          <tr>
		            <td>同城</td>
		            <td>15</td>
		            <td>3</td>
		            <td>12</td>
		            <td>
		              <view class="progress-bar">
		                <view class="progress-fill" style="width: 80%"></view>
		              </view>
		              <text class="progress-text">80%</text>
		            </td>
		          </tr>
		          <tr>
		            <td>专车</td>
		            <td>28</td>
		            <td>5</td>
		            <td>23</td>
		            <td>
		              <view class="progress-bar">
		                <view class="progress-fill" style="width: 82%"></view>
		              </view>
		              <text class="progress-text">82%</text>
		            </td>
		          </tr>
		          <tr>
		            <td>三方</td>
		            <td>7</td>
		            <td>2</td>
		            <td>5</td>
		            <td>
		              <view class="progress-bar">
		                <view class="progress-fill" style="width: 71%"></view>
		              </view>
		              <text class="progress-text">71%</text>
		            </td>
		          </tr>
		          <tr>
		            <td>快递</td>
		            <td>4</td>
		            <td>1</td>
		            <td>3</td>
		            <td>
		              <view class="progress-bar">
		                <view class="progress-fill" style="width: 75%"></view>
		              </view>
		              <text class="progress-text">75%</text>
		            </td>
		          </tr>
		          <tr>
		            <td>逆向</td>
		            <td>3</td>
		            <td>0</td>
		            <td>3</td>
		            <td>
		              <view class="progress-bar">
		                <view class="progress-fill" style="width: 100%"></view>
		              </view>
		              <text class="progress-text">100%</text>
		            </td>
		          </tr>
		        </tbody>
		      </table>
		    </view>
		  </view>
		
		  <!-- 仓库财务状况 -->
		  <view class="panel-card finance-panel">
		    <text class="panel-title">仓库财务状况</text>
		    <view class="finance-items">
		      <view class="finance-item">
		        <view class="finance-header">
		          <text class="finance-name">仓储容积费用</text>
		          <text class="finance-value">¥28,500</text>
		        </view>
		        <view class="finance-progress">
		          <view class="progress-fill" style="width: 75%"></view>
		        </view>
		      </view>
		      
		      <view class="finance-item">
		        <view class="finance-header">
		          <text class="finance-name">分拣费用</text>
		          <text class="finance-value">¥12,300</text>
		        </view>
		        <view class="finance-progress">
		          <view class="progress-fill" style="width: 40%"></view>
		        </view>
		      </view>
		      
		      <view class="finance-item">
		        <view class="finance-header">
		          <text class="finance-name">拆箱费用</text>
		          <text class="finance-value">¥5,800</text>
		        </view>
		        <view class="finance-progress">
		          <view class="progress-fill" style="width: 20%"></view>
		        </view>
		      </view>
		      
		      <view class="finance-item">
		        <view class="finance-header">
		          <text class="finance-name">包装费用</text>
		          <text class="finance-value">¥9,600</text>
		        </view>
		        <view class="finance-progress">
		          <view class="progress-fill" style="width: 32%"></view>
		        </view>
		      </view>
		      
		      <view class="finance-item">
		        <view class="finance-header">
		          <text class="finance-name">装卸费用</text>
		          <text class="finance-value">¥7,200</text>
		        </view>
		        <view class="finance-progress">
		          <view class="progress-fill" style="width: 25%"></view>
		        </view>
		      </view>
		      
		      <view class="finance-item">
		        <view class="finance-header">
		          <text class="finance-name">其它费用</text>
		          <text class="finance-value">¥3,400</text>
		        </view>
		        <view class="finance-progress">
		          <view class="progress-fill" style="width: 12%"></view>
		        </view>
		      </view>
		      
		      <view class="finance-total">
		        <text class="total-label">今日总计</text>
		        <text class="total-value">¥66,800</text>
		      </view>
		    </view>
		  </view>	
		</view>
		   
		</view>

        </view>
       
      </view>

      <!-- 右侧区域：入库/出库信息 -->
      <view class="right-panel">
        <!-- 入库信息 -->
        <view class="panel-card">
          <text class="panel-title">入库信息</text>
          <view class="inbound-stats">
            <view class="stat-item">
              <text class="stat-label">申请单数</text>
              <text class="stat-value">28</text>
            </view>
            <view class="stat-item success">
              <text class="stat-label">已验收</text>
              <text class="stat-value">22</text>
            </view>
            <view class="stat-item warning">
              <text class="stat-label">待审核</text>
              <text class="stat-value">4</text>
            </view>
            <view class="stat-item primary">
              <text class="stat-label">已归档</text>
              <text class="stat-value">20</text>
            </view>
          </view>

          <view class="inbound-charts">
            <view class="chart-wrapper">
              <text class="chart-title">入库状态占比</text>
              <canvas id="inboundStatusChart" canvas-id="inboundStatusChart" class="chart"></canvas>
            </view>
            <view class="chart-wrapper">
              <text class="chart-title">入库类别占比</text>
              <canvas id="inboundCategoryChart" canvas-id="inboundCategoryChart" class="chart"></canvas>
            </view>
          </view>

          <view class="diff-info">
            <text class="diff-title">入库差异</text>
            <view class="diff-stats">
              <view class="diff-item">
                <text class="diff-value">3</text>
                <text class="diff-label">差异单数</text>
              </view>
              <view class="diff-item">
                <text class="diff-value">5</text>
                <text class="diff-label">差异SKU</text>
              </view>
              <view class="diff-item">
                <text class="diff-value">10.7%</text>
                <text class="diff-label">差异占比</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 出库信息 -->
        <view class="panel-card">
          <text class="panel-title">出库信息</text>
          <view class="outbound-stats">
            <view class="stat-item">
              <text class="stat-label">出库单数</text>
              <text class="stat-value">36</text>
            </view>
            <view class="stat-item primary">
              <text class="stat-label">已分拣</text>
              <text class="stat-value">30</text>
            </view>
            <view class="stat-item warning">
              <text class="stat-label">待审核</text>
              <text class="stat-value">2</text>
            </view>
            <view class="stat-item success">
              <text class="stat-label">已出库</text>
              <text class="stat-value">28</text>
            </view>
          </view>

          <view class="outbound-charts">
            <view class="chart-wrapper">
              <text class="chart-title">出库状态占比</text>
              <canvas id="outboundStatusChart" canvas-id="outboundStatusChart" class="chart"></canvas>
            </view>
            <view class="chart-wrapper">
              <text class="chart-title">出库类别占比</text>
              <canvas id="outboundCategoryChart" canvas-id="outboundCategoryChart" class="chart"></canvas>
            </view>
          </view>

          <view class="diff-info">
            <text class="diff-title">出库差异</text>
            <view class="diff-stats">
              <view class="diff-item">
                <text class="diff-value">2</text>
                <text class="diff-label">差异单数</text>
              </view>
              <view class="diff-item">
                <text class="diff-value">3</text>
                <text class="diff-label">差异SKU</text>
              </view>
              <view class="diff-item">
                <text class="diff-value">5.6%</text>
                <text class="diff-label">差异占比</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      currentDate: '',
      currentTime: '',
      charts: {}
    };
  },

  onReady() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },

  methods: {
    // 更新日期时间
    updateDateTime() {
      const now = new Date();
      this.currentDate = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      });
      this.currentTime = now.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
    },

    // 获取Canvas元素（兼容H5和小程序）
    async getCanvasElement(canvasId) {
      return new Promise((resolve, reject) => {
        if (process.env.VUE_APP_PLATFORM === 'h5') {
          const dom = document.getElementById(canvasId);
          if (dom) {
            resolve(dom);
          } else {
            reject(new Error(`H5未找到Canvas元素: ${canvasId}`));
          }
        } else {
          uni.createSelectorQuery()
            .in(this)
            .select(`#${canvasId}`)
            .fields({ node: true, size: true })
            .exec((res) => {
              if (!res || !res[0]) {
                reject(new Error(`小程序未找到Canvas元素: ${canvasId}`));
                return;
              }
              const canvasNode = res[0].node;
              const dpr = uni.getSystemInfoSync().pixelRatio || 1;
              canvasNode.width = res[0].width * dpr;
              canvasNode.height = res[0].height * dpr;
              resolve(canvasNode);
            });
        }
      });
    },

    // 初始化所有图表
    async initCharts() {
      try {
        await this.initVolumeTrendChart();
        await this.initInboundStatusChart();
        await this.initInboundCategoryChart();
        await this.initOutboundStatusChart();
        await this.initOutboundCategoryChart();
      } catch (error) {
        console.error('图表初始化失败:', error);
      }
    },

    // 容积趋势图初始化
// 容积趋势图初始化（示例，其他图表同理）
async initVolumeTrendChart() {
  try {
    const canvasElement = await this.getCanvasElement('volumeTrendChart');
    const chart = echarts.init(canvasElement);
    this.charts.volumeTrendChart = chart;

    const option = {
      // 添加暗黑模式配置
      backgroundColor: 'transparent', // 透明背景，继承容器颜色
      textStyle: { color: '#E5E6EB' }, // 文本颜色适配
      tooltip: { trigger: 'axis' },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['7天前', '6天前', '5天前', '4天前', '3天前', '2天前', '昨天', '今天'],
        axisLine: { lineStyle: { color: '#3A3A55' } }, // 轴线颜色
        axisLabel: { color: '#86909C' } // 轴标签颜色
      },
      yAxis: { 
        type: 'value',
        axisLine: { lineStyle: { color: '#3A3A55' } },
        axisLabel: { color: '#86909C' }
      },
      series: [{
        name: '已用容积 (m³)',
        type: 'line',
        data: [17200, 17500, 17800, 17600, 17900, 18100, 18000, 18200],
        lineStyle: { color: '#165DFF' },
        areaStyle: { color: 'rgba(22, 93, 255, 0.2)' }, // 深色模式下增强透明度
        smooth: true
      }]
    };
    chart.setOption(option);
  } catch (error) {
    console.error('容积趋势图初始化失败:', error);
  }
},

    // 入库状态占比图初始化
    async initInboundStatusChart() {
      try {
        const canvasElement = await this.getCanvasElement('inboundStatusChart');
        const chart = echarts.init(canvasElement);
        this.charts.inboundStatusChart = chart;

        const option = {
          tooltip: { trigger: 'item' },
          legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11,color:'#ffffff' } },
          series: [{
            type: 'pie',
            radius: ['60%', '40%'],
            data: [
              { value: 22, name: '已验收', itemStyle: { color: '#00B42A' } },
              { value: 4, name: '待审核', itemStyle: { color: '#FF7D00' } },
              { value: 20, name: '已归档', itemStyle: { color: '#165DFF' } },
              { value: 2, name: '其他', itemStyle: { color: '#86909C' } }
            ]
          }]
        };
        chart.setOption(option);
      } catch (error) {
        console.error('入库状态占比图初始化失败:', error);
      }
    },

    // 入库类别占比图初始化
    async initInboundCategoryChart() {
      try {
        const canvasElement = await this.getCanvasElement('inboundCategoryChart');
        const chart = echarts.init(canvasElement);
        this.charts.inboundCategoryChart = chart;

        const option = {
          tooltip: { trigger: 'item' },
          legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11,color:'#ffffff' } },
          series: [{
            type: 'pie',
            radius: '60%',
            data: [
              { value: 35, name: '电子产品', itemStyle: { color: '#165DFF' } },
              { value: 25, name: '服装鞋帽', itemStyle: { color: '#722ED1' } },
              { value: 20, name: '家居用品', itemStyle: { color: '#FF7D00' } },
              { value: 20, name: '食品饮料', itemStyle: { color: '#0FC6C2' } }
            ]
          }]
        };
        chart.setOption(option);
      } catch (error) {
        console.error('入库类别占比图初始化失败:', error);
      }
    },

    // 出库状态占比图初始化
    async initOutboundStatusChart() {
      try {
        const canvasElement = await this.getCanvasElement('outboundStatusChart');
        const chart = echarts.init(canvasElement);
        this.charts.outboundStatusChart = chart;

        const option = {
          tooltip: { trigger: 'item' },
          legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 ,color:'#ffffff'} },
          series: [{
            type: 'pie',
            radius: ['60%', '40%'],
            data: [
              { value: 30, name: '已分拣', itemStyle: { color: '#165DFF' } },
              { value: 2, name: '待审核', itemStyle: { color: '#FF7D00' } },
              { value: 28, name: '已出库', itemStyle: { color: '#00B42A' } },
              { value: 4, name: '其他', itemStyle: { color: '#86909C' } }
            ]
          }]
        };
        chart.setOption(option);
      } catch (error) {
        console.error('出库状态占比图初始化失败:', error);
      }
    },

    // 出库类别占比图初始化
    async initOutboundCategoryChart() {
      try {
        const canvasElement = await this.getCanvasElement('outboundCategoryChart');
        const chart = echarts.init(canvasElement);
        this.charts.outboundCategoryChart = chart;

        const option = {
          tooltip: { trigger: 'item' },
          legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11,color:'#ffffff' } },
          series: [{
            type: 'pie',
            radius: '60%',
            data: [
              { value: 30, name: '电子产品', itemStyle: { color: '#165DFF' } },
              { value: 30, name: '服装鞋帽', itemStyle: { color: '#722ED1' } },
              { value: 25, name: '家居用品', itemStyle: { color: '#FF7D00' } },
              { value: 15, name: '食品饮料', itemStyle: { color: '#0FC6C2' } }
            ]
          }]
        };
        chart.setOption(option);
      } catch (error) {
        console.error('出库类别占比图初始化失败:', error);
      }
    },

    // 添加卡片加载动画
    addCardAnimation() {
      const cards = document.querySelectorAll('.panel-card');
      cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
          card.style.opacity = '1';
          card.style.transform = 'translateY(0)';
        }, 100 + index * 100);
      });
    }
  },

  onLoad() {
    this.updateDateTime();
    setInterval(this.updateDateTime, 1000);
    this.addCardAnimation();
  },

  onResize() {
    Object.values(this.charts).forEach(chart => {
      chart && chart.resize();
    });
  },

  onUnload() {
    Object.values(this.charts).forEach(chart => {
      chart && chart.dispose();
    });
  }
};
</script>

<style >
/* 全局变量定义 */
:root {
  --primary-color: #165DFF;
  --success-color: #00B42A;
  --warning-color: #FF7D00;
  --danger-color: #F53F3F;
  --dark-bg: #1E1E2E;
  --card-bg: #292941;
  --text-primary: #E5E6EB;
  --text-secondary: #86909C;
  --border-color: #3A3A55;
  --hover-bg: #363653;
}

/* 基础样式 */
.container {
  padding: 24px 32px;
   background-color: var(--dark-bg) !important; 
  min-height: 100vh;
  color: var(--text-primary);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-left .page-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 6px;
}

.header-left .warehouse-info {
  font-size: 16px;
  color: var(--text-secondary);
}

.header-right .datetime-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.header-right .current-date {
  font-weight: 500;
  margin-bottom: 4px;
}

.header-right .current-time {
  font-size: 16px;
  color: var(--text-secondary);
}

/* 数据卡片样式 */
.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.stat-card {
  background-color: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  border-color: rgba(22, 93, 255, 0.3);
}

.stat-title {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 10px;
}

.stat-value {
  color: var(--text-primary);
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 6px;
}

.stat-trend {
  font-size: 14px;
  color: var(--success-color);
}

/* 主要内容区域 */
.main-content {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.left-panel, .right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel-card {
  background-color: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
  flex: 1;
  margin-top: 20px;
}

.panel-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.panel-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: var(--primary-color);
  border-radius: 2px;
  margin-right: 8px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-period-selector {
  display: flex;
  gap: 8px;
}

.period-btn {
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 999px;
  border: none;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.period-btn.active {
  background-color: rgba(22, 93, 255, 0.2);
  color: var(--primary-color);
}

.period-btn:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.1);
}

.chart-container {
  height: 280px;
}

/* 存储区样式 */
.storage-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.storage-area {
  padding: 16px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.storage-area:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.storage-area.normal {
  border-left: 4px solid var(--primary-color);
}

.storage-area.cold {
  border-left: 4px solid var(--text-secondary);
}

.storage-area.danger {
  border-left: 4px solid var(--danger-color);
}

.area-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.area-name {
  font-weight: 500;
}

.area-slots {
  font-size: 12px;
  color: var(--text-secondary);
}

.area-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
}

.info-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.info-value {
  font-size: 14px;
  font-weight: 500;
}

.view-monitor {
  color: var(--primary-color);
  font-size: 14px;
  text-align: right;
  cursor: pointer;
  margin-top: 8px;
  display: inline-block;
  transition: all 0.2s ease;
}

.view-monitor:hover {
  color: #4080FF;
  transform: translateX(2px);
}

/* 统计卡片样式 */
.inbound-stats, .outbound-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.stat-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
}

.stat-item.success .stat-value {
  color: var(--success-color);
}

.stat-item.warning .stat-value {
  color: var(--warning-color);
}

.stat-item.primary .stat-value {
  color: var(--primary-color);
}

.inbound-charts, .outbound-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
 
}

.chart-wrapper {
  height: 260px;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.chart {
  width: 100%;
  height: 100%;

}

.diff-info {
  background-color: rgba(245, 63, 63, 0.1);
  border: 1px solid rgba(245, 63, 63, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-top: 30px;
}

.diff-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--danger-color);
  margin-bottom: 12px;
}

.diff-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.diff-item {
  text-align: center;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.diff-value {
  font-weight: bold;
  color: var(--danger-color);
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.diff-label {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 底部区域样式 */
.bottom-section {
  display: flex;
  gap: 24px;
}

.logistics-panel, .finance-panel {
  flex: 1;
}

.logistics-table {
  width: 100%;
  border-collapse: collapse;
}

.logistics-table th, .logistics-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.logistics-table th {
  font-weight: 600;
  color: var(--text-secondary);
  background-color: rgba(255, 255, 255, 0.03);
}

.logistics-table td {
  color: var(--text-primary);
}

.logistics-table tr:hover {
  background-color: var(--hover-bg);
}

.progress-bar {
  height: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}

.progress-fill[style*="80%"] { background-color: var(--primary-color); }
.progress-fill[style*="82%"] { background-color: var(--primary-color); }
.progress-fill[style*="71%"] { background-color: var(--primary-color); }
.progress-fill[style*="75%"] { background-color: var(--primary-color); }
.progress-fill[style*="100%"] { background-color: var(--success-color); }

.progress-text {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

.finance-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.finance-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 8px 20px;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.finance-item:hover {
  background-color: var(--hover-bg);
}

.finance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.finance-name {
  font-size: 16px;
  color: var(--text-secondary);
}

.finance-value {
  font-size: 18px;
  font-weight: 500;
}

.finance-progress {
  height: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.finance-progress .progress-fill {
  height: 100%;
  background-color: var(--primary-color);
}

.finance-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.total-label {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-secondary);
}

.total-value {
  font-size: 22px;
  font-weight: bold;
  color: var(--text-primary);
}
</style>
